<template>
  <div class="tq_list">
    <div>
      <div>空气质量：{{tiganwendu}}</div>
      <div>风力等级：{{jianshui}}</div>
    </div>
    <div>
      <h3>{{city}}未来一周的天气情况</h3>

      <table class="tianqi-list">
        <tr>
          <th>日期（星期）</th>
          <th>天气情况</th>
          <th>温度</th>
        </tr>
        <tr v-for="i in weilaitq.data">
          <th>{{i.day}}</th>
          <th>{{i.wea}}</th>
          <th>{{i.tem2}}℃-{{i.tem1}}℃</th>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TianqiList',
  props: {
    tiganwendu: { type: String },
    jianshui: { type: String },
    city: { type: String },
    weilaitq: { type: Object },
    required: true
  },
  data () {
    return {

    }
  },

}
</script>

<style>
.tq_list {
  width: 100%;
  height: 40%;
  /* background-color: #000066; */
}
.tq_list > div:nth-child(1) {
  width: 90%;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  /* background-color: #0000EE; */
  display: flex;
}
.tq_list > div:nth-child(1) > div {
  flex: 1;
}
.tq_list > div:nth-child(1) > div:nth-child(2) {
  text-align: right;
}
.tq_list > div:nth-child(2) {
  width: 100%;
  height: 60%;
  /* background-color: #000000; */
  border-top: 1px solid #00193a;
}
.tq_list > div:nth-child(2) > h3 {
  text-align: center;
  /* background-color: #000000; */
  margin-top: 5px;
  line-height: 40px;
}
.tq_list > div:nth-child(2) > div {
  width: 90%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
}
.tq_list > div:nth-child(2) > div > p {
  padding: 0 5px;
  display: inline-block;

  /* background-color: #000066; */
}
.tq_list > div:nth-child(2) > div > p:nth-child(2) {
  float: right;
}
.tq_list > div:nth-child(3) {
  width: 90%;
  height: 60px;
  margin: 0 auto;
  line-height: 60px;
  text-align: center;
  color: white;
  background-color: #66b3ff;
  border-radius: 30px;
}
.tianqi-list {
  width: 100%;
  /* background-color: #00193a; */
}
.tianqi-list tr {
  line-height: 30px;
}
</style>
